<template>
   <div class="rechargeDetail">
        <van-nav-bar
        :title="type2 + $t('详情')"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="flex flex-col items-center justify-center">
            <div class="text-grey font-32 num-text">{{ $t('数量') }}</div>
            <div class="font-55 textColor">
                <span  class="font-bold">{{info.amount}}</span>
                <span class="font-45 ml10">{{info.coin}}</span>
            </div>
            <div class="flex items-center justify-center mt53 mb16">
                <img :src="require(`@/assets/image/assets-center/${status[info.state].split('_')[1]}.png`)" width="18" height="18"/>
                <span class="ml10 font-32 textColor">{{type2}}{{  status[info.state] && status[info.state].split('_')[0] }}</span>
            </div>
            <div class="text-grey font-26 pl-30 pr-30">
              {{ $t('数字币已经')}}{{$t(type2)}}{{status[info.state] && status[info.state].split('_')[0]}}{{$t('。您可以在钱包账户中查看详情。')}}
            </div>
        </div>
        <div class="border-light-grey mt42"></div>
        <div class="font-30 pl-30 pr-30 mt53">
             <div class="flex justify-between mb74">
                <div class="text-grey">{{ $t('确认数') }}</div>
                <div class="textColor">12/12</div>
             </div>
             <div class="flex justify-between mb74">
                <div class="text-grey">{{type2}}{{ $t('账户') }}</div>
                <div class="textColor">{{ $t('钱包账户') }}</div>
             </div>
             <div class="flex justify-between mb74">
                <div class="text-grey">{{ $t('转账网络') }}</div>
                <div class="textColor">{{info.coin_blockchain}}</div>
             </div>
             <div class="flex justify-between mb74">
                <div class="text-grey pr-20">{{ $t('地址') }}</div>
                <div class="flex">
                    <div class="font-30 text-underline textColor break-word">{{info.from || info.to}}</div>
                    <img src="../../assets/image/assets-center/copy.png" width="15" height="15" class="ml10 ml-20" @click="copy(info.from || info.to)"/>
                </div>
             </div>
<!--             <div class="flex justify-between mb74">-->
<!--                <div class="text-grey">{{ $t('交易哈希') }}</div>-->
<!--                <div class="flex">-->
<!--                    <div class="font-30 text-underline">{{info.tx || '-'}}</div>-->
<!--                    <img src="../../assets/image/assets-center/copy.png" width="15" height="15" class="ml10 ml-20" @click="copy(info.tx)"/>-->
<!--                </div>-->
<!--             </div>-->
             <div class="flex justify-between mb74">
                <div class="text-grey">{{ $t('日期') }}</div>
                <div class="textColor">{{info.create_time}}</div>
             </div>
              <div class="flex justify-between mb74">
                <div class="text-grey">{{ $t('备注') }}</div>
                <div class="textColor">{{info.failure_msg || '-'}}</div>
             </div>
        </div>

   </div>
</template>

<script>
import { _rechargeDetail, _withdrawDetail } from '@/API/fund.api'
export default {
    name:"rechargeDetail",
    props: {
        type: {
            type: String,
            default: '充值'
        }
    },
    computed: {
      type2(){
        let res
        if (this.type === '充值') {
          res = this.$t('充值') + ' '
        } else {
          res = this.$t('提现') + ' '
        }
        return res
      },
    },
    data() {
        return {
            order_no: '',
            info: {
                state: 0
            },
            status: [this.$t('确定中')+'_identifing', this.$t('成功')+'_small-success', this.$t('失败')+'_icon-close']
        }
    },
    created() {
        this.order_no = this.$route.query.order_no
        const _api = this.type === '充值' ? _rechargeDetail : _withdrawDetail
       _api( this.order_no).then(data => {
           this.info = data
       })
    },
    methods:{
        copy(val) {
            if (!val) {
                return
            }
            navigator.clipboard.writeText(val).then(() => {
                this.$toast.success(this.$t('已复制'))
            })
        },
        onClickLeft() {
            this.$router.go(-1);
        },
    }
}
</script>
<style lang="scss" scoped>
.rechargeDetail{
    width: 100%;
    box-sizing: border-box;
    ::v-deep .van-hairline--bottom::after {
            border-color: $border_color;
        }
}
.num-text{
    margin-top:70px;
    margin-bottom:30px;
}
.mb53{
    margin-bottom:53px;
}
.ml10{
    margin-left:10px;
}

.mt53{
    margin-top:53px;
}

.mb16{
    margin-bottom:16px;
}

.mt42{
     margin-top:42px;
}

.mb74{
    margin-bottom:74px;
}

.text-underline{
    text-decoration: underline;
}
</style>
